@charset "utf-8";
/** * @author https://www.cosmosfarm.com */

.sub_txt {margin-top:40px; font-size:14px; line-height:1.4; color:#555; word-break:keep-all;}
/*list*/
.before_after {display:flex; flex-wrap:wrap; margin:0 -40px 0 0; text-align:center; letter-spacing:0;}
.before_after > li {position:relative; width:calc(50% - 40px); margin:40px 40px 0 0;}
.before_after > li > a {display:block;}
.before_after > li > .board_btn_wrap {position:absolute; z-index:1; top:0; right:0; margin:0;}
/*
.before_after > li > a > div {display:flex;}*/
.before_after > li > a > strong {display:block; margin-top:24px; text-align:left; font-size:20px; line-height:1; color:#333}
.before_after .img {position:relative; width:100%; height:300px; overflow:hidden;}
.before_after .img > img {width:100%; height:100%; object-fit:cover;}

.before_after .two_imgbox {display:flex;}
.before_after .two_imgbox > div {position:relative; width:50%;}

.before_after .before .txt_wrap {display:flex; align-items:center; justify-content:center; position:absolute; z-index:1; top:0; left:0; width:100%; height:100%; padding:14px; color:#fff; background:rgba(0,0,0,0.5); backdrop-filter:blur(15px);}
.before_after .before .txt_wrap .tit {display:block; font-size:18px; line-height:1;}
.before_after .before .txt_wrap .txt {margin-top:16px; font-size:14px; line-height:1.4;}
.before_after .before .txt_wrap .btn {display:inline-block; padding:11.5px 40px; margin-top:20px; font-size:12px; font-weight:700; line-height:1; background:#fff;}

.before_after .before > strong.tit,
.before_after .after .tit {display:block; position:absolute; z-index:1; left:0; bottom:0; width:100%; padding:14px; color:#fff; font-size:12px; line-height:1; background:rgba(0,0,0,0.3);}

/*document*/
.basic_view .before_after {margin:0;}
.basic_view .before_after .two_imgbox {width:100%; margin:0;}
.basic_view .before_after .two_imgbox .img {width:100%; height:auto;}


@media screen and (max-width: 1199px) {
	/*list*/
	.before_after .img {width:100%;}
}
@media screen and (max-width: 1024px) {
	/*list*/
	.before_after {margin-right:0;}
	.before_after > li {width:100%; margin-right:0;}
}
@media screen and (max-width: 640px) {
	.sub_txt {margin-top:24px; font-size:10px; padding-right:26px;}
	/*list*/
	.before_after {margin-top:-12px;}
	.before_after > li {margin-top:32px;}
	.before_after .img {height:138px;}
	.before_after .before .txt_wrap .tit {font-size:10px;}
	.before_after .before .txt_wrap .txt {display:none;}
	.before_after .before .txt_wrap .btn {padding:8px 20px; margin-top:10px; font-size:10px;}
	.before_after .before > strong.tit,
	.before_after .after .tit {padding:7px; font-size:10px;}

	.before_after > li > a > strong {margin-top:16px; font-size:14px;}

	/*document*/
	.basic_view .before_after > li {display:block; max-width:400px; margin:0 auto;}
	.basic_view .before_after > li > div {width:100%;}
}